<!--
Copyright 2017 The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<style>
 /* Using borders, padding, and margins of various prime values. */
    .scrollDiv {
      left:50px; width:250px; height: 100px;
      position:absolute; overflow:auto; border-left: 3px solid green;
      border-right: 17px solid green; margin: 7px; padding: 13px;
    }
</style>
<span id="bodyChild" style="position:fixed;left:60px">
 bodyChild
</span>
<div>
 <span>
  LTR
 </span>
 <div class="scrollDiv" dir="ltr" id="scrollDivLtr" onscroll="updateInfo()">
  <div style="width: 1000px; height: 2000px;background-color: blue">
  </div>
  <div id="scrolledElementLtr" style="background:yellow; top: 25px; left:85px;
             width: 100px; position:absolute">
   elm
  </div>
 </div>
 <div style="left:400px; position:absolute;">
  <div>
   elm.offsetParent.scrollLeft:
   <span id="elementScrollLeftLtr">
   </span>
  </div>
  <div>
   bidi.getScrollLeft(...):
   <span id="bidiScrollLeftLtr">
   </span>
  </div>
  <div>
   bidi.getOffsetStart(...):
   <span id="bidiOffsetStartLtr">
   </span>
  </div>
  <form action="bidi_test.html#" name="formLtr">
   goog.style.bidi.setScrollOffset:
   <input name="pixelsLtr" type="text"/>
   <a href="bidi_test.html#" onclick="goog.style.bidi.setScrollOffset(
          document.getElementById('scrollDivLtr'),
          parseInt(formLtr.elements['pixelsLtr'].value));">
    set
   </a>
  </form>
 </div>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
</div>
<hr/>
<div>
 <span>
  RTL
 </span>
 <div class="scrollDiv" dir="rtl" id="scrollDivRtl" onscroll="updateInfo();">
  <div style="width:1000px; height:70px;background-color:blue">
  </div>
  <div id="scrolledElementRtl" style="background:yellow; top: 25px; right:85px;
             width: 100px; position:absolute">
   elm
  </div>
 </div>
 <div style="left:400px; position:absolute;">
  <div>
   elm.offsetParent.scrollLeft:
   <span id="elementScrollLeftRtl">
   </span>
  </div>
  <div>
   bidi.getScrollLeft(...):
   <span id="bidiScrollLeftRtl">
   </span>
  </div>
  <div>
   bidi.getOffsetStart(...):
   <span id="bidiOffsetStartRtl">
   </span>
  </div>
  <form action="bidi_test.html#" name="formRtl">
   goog.style.setScrollOffset:
   <input name="pixelsRtl" type="text"/>
   <a href="bidi_test.html#" onclick="goog.style.bidi.setScrollOffset(
          document.getElementById('scrollDivRtl'),
          parseInt(formRtl.elements['pixelsRtl'].value));">
    set
   </a>
  </form>
 </div>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
 <br/>
</div>
<div dir="rtl" id="scrollLeftRtl" style="position: relative; width: 100px; height: 100px;
      background-color: blue">
 <div style="position:absolute; width: 200px; height: 20px; background-color:
    green">
  INNER
 </div>
</div>
<hr/>
<br/>
<br/>
